<template>
  <view class="create-feedback-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">提交反馈</text>
    </view>
    
    <view class="form-container">

      
      <!-- 反馈标题 -->
      <view class="form-item">
        <text class="item-label required">反馈标题</text>
        <view class="input-wrapper">
          <input 
            class="form-input" 
            v-model="form.title" 
            placeholder="请输入标题（5-20字）" 
            placeholder-class="placeholder"
            maxlength="20"
          />
          <text class="input-count">{{ form.title.length }}/20</text>
        </view>
      </view>
      
      <!-- 反馈内容 -->
      <view class="form-item">
        <text class="item-label required">反馈内容</text>
        <view class="textarea-wrapper">
          <textarea 
            class="form-textarea" 
            v-model="form.content" 
            placeholder="请详细描述您的问题或建议，以便我们能更好地为您解决（10-500字）" 
            placeholder-class="placeholder"
            maxlength="500"
            auto-height
          />
          <text class="input-count">{{ form.content.length }}/500</text>
        </view>
      </view>
      
      <!-- 图片上传 -->
      <view class="form-item">
        <text class="item-label">相关图片</text>
        <view class="image-uploader">
          <view 
            v-for="(image, index) in form.images" 
            :key="index" 
            class="image-item"
          >
            <text class="delete-btn" @tap="removeImage(index)">×</text>
            <text class="image-placeholder iconfont">&#xe67f;</text>
          </view>
          <view class="upload-btn" v-if="form.images.length < 3" @tap="chooseImage">
            <text class="upload-icon">+</text>
            <text class="upload-text">上传图片</text>
          </view>
        </view>
        <text class="upload-tip">支持jpg、png格式，单张不超过5MB，最多上传3张</text>
      </view>
      
      <!-- 反馈人姓名 -->
      <view class="form-item">
        <text class="item-label required">反馈人姓名</text>
        <view class="input-wrapper">
          <input 
            class="form-input" 
            v-model="form.name" 
            placeholder="请输入您的姓名" 
            placeholder-class="placeholder"
            maxlength="10"
          />
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="form-item">
        <text class="item-label">联系方式（选填）</text>
        <view class="input-wrapper">
          <input 
            class="form-input" 
            v-model="form.contact" 
            placeholder="请输入您的联系方式，方便我们与您联系" 
            placeholder-class="placeholder"
          />
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <view class="form-actions">
        <view 
          class="submit-btn" 
          :class="{ 'disabled': !isFormValid }" 
          @tap="submitFeedback"
        >
          <text>提交反馈</text>
        </view>
      </view>
      
      <!-- 反馈提示 -->
      <view class="feedback-tips">
        <view class="tips-title">
          <text class="tips-icon">i</text>
          <text class="tips-text">反馈提示：</text>
        </view>
        <view class="tips-content">
          <text class="tips-item">• 我们会在2个工作日内处理您的反馈</text>
          <text class="tips-item">• 请尽量提供详细的信息，以便我们更好地解决问题</text>
          <text class="tips-item">• 如有紧急问题，请联系客服热线：400-123-4567</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

// 表单数据
const form = ref({
  name: '',
  title: '',
  content: '',
  images: [],
  contact: ''
});

// 表单验证
const isFormValid = computed(() => {
  return form.value.name && 
         form.value.title.length >= 5 && 
         form.value.title.length <= 20 && 
         form.value.content.length >= 10 && 
         form.value.content.length <= 500;
});

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 3 - form.value.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: async (res) => {
      // 检查文件大小
      const files = res.tempFiles;
      const validFiles = files.filter(file => file.size <= 5 * 1024 * 1024);
      
      if (validFiles.length !== files.length) {
        uni.showToast({
          title: '部分图片超过5MB限制',
          icon: 'none'
        });
      }
      
      // 上传图片到服务器
      try {
        uni.showLoading({
          title: '上传中...'
        });

        const uploadPromises = validFiles.map(async (file) => {
          const formData = new FormData();
          formData.append('file', file);
          
          const response = await uni.uploadFile({
            url: '/api/app/common/upload',
            filePath: file.path,
            name: 'file',
            formData: formData
          });
          
          if (response.statusCode === 200) {
            const result = JSON.parse(response.data);
            if (result.code === 1) {
              return result.data.file;
            }
          }
          throw new Error('上传失败');
        });

        const uploadedUrls = await Promise.all(uploadPromises);
        form.value.images.push(...uploadedUrls);

        uni.hideLoading();
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '图片上传失败',
          icon: 'none'
        });
      }
    },
    fail: () => {
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      });
    }
  });
};

// 移除图片
const removeImage = (index) => {
  form.value.images.splice(index, 1);
  
  uni.showToast({
    title: '已移除图片',
    icon: 'none'
  });
};

// 提交反馈
const submitFeedback = async () => {
  if (!isFormValid.value) {
    if (!form.value.name) {
      return uni.showToast({
        title: '请输入反馈人姓名',
        icon: 'none'
      });
    }
    
    if (form.value.title.length < 5 || form.value.title.length > 20) {
      return uni.showToast({
        title: '标题长度需在5-20字之间',
        icon: 'none'
      });
    }
    
    if (form.value.content.length < 10 || form.value.content.length > 500) {
      return uni.showToast({
        title: '内容长度需在10-500字之间',
        icon: 'none'
      });
    }
  }
  
  try {
    uni.showLoading({
      title: '提交中...'
    });

    const params = {
      content: form.value.content,
      name: form.value.name,
      phone: form.value.contact,
      theme: form.value.title,
      userComplaintImgDTOList: form.value.images.map((url, index) => ({
        image: url,
        sort: index
      })),
      userId: userStore.userInfo.id
    };

    const response = await uni.request({
      url: '/api/app/feedback/submit',
      method: 'POST',
      data: params,
      header: {
        'Authorization': `Bearer ${userStore.token}`
      }
    });

    if (response.statusCode === 200 && response.data.code === 1) {
      uni.hideLoading();
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      });
      
      setTimeout(() => {
        goBack();
      }, 1500);
    } else {
      throw new Error(response.data.message || '提交失败');
    }
  } catch (error) {
    uni.hideLoading();
    uni.showToast({
      title: error.message || '提交失败，请重试',
      icon: 'none'
    });
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.create-feedback-page {
  min-height: 100vh;
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(120, 194, 173, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #38a688;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #38a688;
    }
  }
  
  .form-container {
    padding: 15px;
    
    .form-item {
      margin-bottom: 20px;
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      
      .item-label {
        font-size: 15px;
        font-weight: 500;
        color: #5d4037;
        margin-bottom: 10px;
        display: block;
        
        &.required:after {
          content: '*';
          color: #f44336;
          margin-left: 4px;
        }
      }
      
      // 文本域
      .textarea-wrapper {
        position: relative;
        width: 100%;
        
        .form-textarea {
          width: 100%;
          min-height: 120px;
          background-color: #f8f8f8;
          border: 1px solid #eee;
          border-radius: 8px;
          padding: 10px 15px;
          font-size: 14px;
          color: #5d4037;
          line-height: 1.5;
          box-sizing: border-box;
          word-break: break-all;
          
          &:focus {
            border-color: #38a688;
          }
        }
        
        .input-count {
          position: absolute;
          right: 10px;
          bottom: 10px;
          font-size: 12px;
          color: #bcaaa4;
          background-color: #f8f8f8;
          padding: 0 5px;
        }
      }
      
      .placeholder {
        color: #bcaaa4;
      }
      
      // 输入框
      .input-wrapper {
        position: relative;
        width: 100%;
        
        .form-input {
          width: 100%;
          height: 44px;
          background-color: #f8f8f8;
          border: 1px solid #eee;
          border-radius: 8px;
          padding: 0 15px;
          font-size: 14px;
          color: #5d4037;
          box-sizing: border-box;
          
          &:focus {
            border-color: #38a688;
          }
        }
        
        .input-count {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 12px;
          color: #bcaaa4;
          background-color: #f8f8f8;
          padding: 0 5px;
        }
      }
      
      // 图片上传
      .image-uploader {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px;
        
        .image-item {
          position: relative;
          width: calc(33.33% - 10px);
          height: 90px;
          margin: 5px;
          background-color: #f8f8f8;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          
          .delete-btn {
            position: absolute;
            top: 0;
            right: 0;
            width: 22px;
            height: 22px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 0 0 0 8px;
            color: #fff;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
          }
          
          .image-placeholder {
            font-size: 30px;
            color: #bcaaa4;
          }
        }
        
        .upload-btn {
          width: calc(33.33% - 10px);
          height: 90px;
          margin: 5px;
          background-color: #f8f8f8;
          border: 1px dashed #ddd;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
          .upload-icon {
            font-size: 24px;
            color: #bcaaa4;
            margin-bottom: 5px;
          }
          
          .upload-text {
            font-size: 12px;
            color: #bcaaa4;
          }
        }
      }
      
      .upload-tip {
        font-size: 12px;
        color: #bcaaa4;
        margin-top: 8px;
        display: block;
      }
    }
    
    // 提交按钮
    .form-actions {
      margin: 30px 0;
      
      .submit-btn {
        height: 44px;
        background: linear-gradient(135deg, #78c2ad, #38a688);
        border-radius: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 10px rgba(56, 166, 136, 0.2);
        
        &.disabled {
          opacity: 0.6;
        }
        
        text {
          font-size: 16px;
          font-weight: 500;
          color: #fff;
        }
      }
    }
    
    // 反馈提示
    .feedback-tips {
      background-color: rgba(56, 166, 136, 0.05);
      border-radius: 12px;
      padding: 15px;
      
      .tips-title {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        
        .tips-icon {
          width: 16px;
          height: 16px;
          background-color: #38a688;
          border-radius: 8px;
          font-size: 12px;
          font-weight: bold;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 6px;
        }
        
        .tips-text {
          font-size: 14px;
          font-weight: 500;
          color: #38a688;
        }
      }
      
      .tips-content {
        .tips-item {
          font-size: 13px;
          color: #8d6e63;
          line-height: 1.6;
          display: block;
        }
      }
    }
  }
}
</style> 